import React, { Component } from 'react'
import { connect } from 'react-redux'
import { createContainer } from 'utils/hoc'
import { Form } from 'antd'
import ContentBox from 'components/contentBox'
import CustomTable from 'components/common/table'
import PropTypes from 'prop-types'

import Style from './loginDetails.css'

class LoginDetails extends Component {
  static propTypes = {
    loginData: PropTypes.any,
    getLoginList: PropTypes.func,
    match: PropTypes.any
  }
  constructor (props) {
    super(props)
    this.state = {
      userId: null
    }
    this.onPageChange = this.onPageChange.bind(this)
  }

  getTableCols () {
    return [
      // {
      //   title: '序号',
      //   dataIndex: 'id',
      //   key: 'id',
      //   width: 100,
      //   sorter: (a, b) => a.id - b.id
      // },
      {
        title: '时间',
        dataIndex: 'loginTime',
        key: 'loginTime',
        width: 100,
        sorter: (a, b) => a.loginTime - b.loginTime
      },
      {
        title: 'IP',
        dataIndex: 'ip',
        key: 'ip',
        width: 100
      },
      {
        title: '地区',
        dataIndex: 'address',
        key: 'address',
        width: 100
      },
      {
        title: '登陆方式',
        dataIndex: 'loginType',
        key: 'loginType',
        width: 100
      }
    ]
  }

  onPageChange (pageNo, pageSize) {
    let params = {}
    params.pageNo = pageNo
    params.pageSize = pageSize
    params.userId = this.state.userId
    this.setState({
      pageNo
    })
    this.props.getLoginList(params)
  }

  componentDidMount () {
    const { match } = this.props
    const { params } = match
    let { id } = params
    this.setState({
      userId: id
    })
    const { pageSize, pageNo } = this.state
    this.props.getLoginList({
      pageSize,
      pageNo,
      userId: id
    })
  }

  render () {
    const { pageNo, pageSize } = this.state
    const { loginData } = this.props
    const pagination = {
      showSizeChanger: true,
      current: pageNo,
      total: loginData && loginData.total,
      onChange: this.onPageChange,
      pageSize,
      onShowSizeChange: this.onShowSizeChange
    }
    return (
      <>
        <ContentBox>
          <div className={Style['users-manage-login-details']}>
            <div className={Style['title']}>数据列表</div>
            <CustomTable loading={!loginData} columns={this.getTableCols()} dataSource={(loginData && loginData.list) || []} pagination={pagination} />
          </div>
        </ContentBox>
      </>
    )
  }
}

const mapState = state => ({
  loginData: state.users.loginData
})
const mapDispatch = dispatch => ({
  getLoginList: dispatch.users.getLoginList
})
const FormLoginDetails = Form.create()(LoginDetails)

export default createContainer(
  connect(
    mapState,
    mapDispatch
  )(FormLoginDetails)
)
